<template>
	<view class="zdy-flex message-content">
		<u-navbar leftIconSize="0" :bgColor="showNav ? 'transparent' : '#fff'" title="消息"></u-navbar>
		<view class="message-box">
			<view class="message-type">
				<view class="">
					<u-badge max="99" absolute :offset="[-4, 1]" :value="99"></u-badge>
					<image src="/static/img/message/gonggao.png" mode=""></image>
					系统公告
				</view>
				<view class="">
					<u-badge max="99" absolute :offset="[-4, 1]" :value="2"></u-badge>
					<image src="/static/img/message/hudong.png" mode=""></image>
					互动消息
				</view>
				<view class="">
					<u-badge max="99" absolute :offset="[-4, 1]" :value="0"></u-badge>
					<image src="/static/img/message/daiban.png" mode=""></image>
					待办事项
				</view>
			</view>
			<view class="message-list">
				<view class="no-list">
					<image src="/static/img/message/noXiaoxi.png" mode=""></image>
					暂无聊天信息
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			showNav: true //隐藏导航栏背景
		};
	},
	methods: {},
	mounted() {},
	onPageScroll(e) {
		this.showNav = e.scrollTop < 5;
	}
};
</script>
<style>
page {
	min-height: 100vh;
	background: linear-gradient(180deg, #fff8e8 0%, #fff8e8 20%, #f6f6f6 30%, #f6f6f6 100%);
	background-attachment: fixed;
}
</style>
<style lang="scss" scoped>
.message-content {
	height: 100vh;
	flex-direction: column;
}
.message-box {
	display: flex;
	flex-direction: column;
	margin-top: -300rpx;
	position: relative;
	flex: 1;
	.message-type {
		padding: 50rpx 100rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
		background: #ffffff;
		border-radius: 64rpx 64rpx 0rpx 0rpx;
		font-weight: bold;
		color: #333333;
		image {
			margin-bottom: 10rpx;
			width: 88rpx;
			height: 88rpx;
			border-radius: 999rpx;
		}
		& > view {
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
		}
	}
	.message-list {
		background-color: #ffffff;
		height: 100%;
		.no-list {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 150rpx;
			font-size: 24rpx;
			color: #999999;
			image {
				width: 400rpx;
				height: 280rpx;
			}
		}
	}
}
</style>
